<template lang="html">
  <div class="bottom-nav">
    <ul>
      <router-link tag='li' active-class='active' to="/index">
        <i class="iconfont icon-shouyeshixin"></i>
        首页
      </router-link>
      <router-link tag='li' active-class='active' to="/workshop">
        <i class="iconfont icon-shiliaofangkongxin"></i>
        食疗坊
      </router-link>
      <router-link tag='li' active-class='active' to="/recordsymptom">
        <i class="iconfont icon-sirendingzhikongxin"></i>
        私人订制
      </router-link>
      <router-link tag='li' active-class='active' to="/mine">
        <i class="iconfont icon-wodekongxin"></i>
        我的
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name:'BottomNav'
}
</script>

<style lang="less" scoped>
.bottom-nav{
  width: 100%;
  position: fixed;
  bottom: 0;
  border-top: 0.01rem solid #979797;
  background-color: #fff;
  ul{
    width: 100%;
    height: 1.17rem;
    display: flex;
    li{
      flex: 1;
      text-align: center;
      i{
        display: block;
        margin-top: 0.05rem;
        font-size: 0.43rem;
      }
    }
    .active{
      color: #44bf91;
    }
  }
}
</style>
